import React, { Component } from 'react';
import "./App.scss"
import "./icon.css"
// 购物小车的例子
class App extends Component {
  getTotalPrice = (params) => {
    let totalPrice = 0;
    this.state.products.map(p=>{
      if(p.checked){
        totalPrice+=p.num*p.price;
      }
    })
    return totalPrice;
  };
  getSelectNum = (params) => {
    let selector_num=0;
    this.state.products.map(p=>{
      if(p.checked){
        selector_num+=p.num; 
      }
    })
    return selector_num;
  };
  state = {
    select_num:0,//选中商品数
    totalPrice:0,//总价
    products: [
      {
        id: 1,
        product_title: "黑科技区分控温，95%鹅绒抗菌儿童鹅绒被",
        img_url: "https://yanxuan-item.nosdn.127.net/88228233760635af6ac3d5119fe1a5d1.jpg?type=webp&imageView&thumbnail=78x78&quality=95",
        price: 588,
        origin_price: 599,
        num: 1,
       checked: true,
      },
      {
        id: 2,
        product_title: "黑科技区分控温，95%鹅绒抗菌儿童鹅绒被",
        img_url: "https://yanxuan-item.nosdn.127.net/88228233760635af6ac3d5119fe1a5d1.jpg?type=webp&imageView&thumbnail=78x78&quality=95",
        price: 588,
      origin_price: 599,
        num: 1,
       checked: true,
      },
    ],
  };
  handleSub=(index) => {
    console.log("執行handlesub",index);
    // this.state.products[index].num; 
    // todo 优化 immutable.js
    let products = this.state.products;
   --products[index].num;
    this.setState({
      products:products,
    })
  };
  handleAdd=(index) => {
    console.log("執行handleadd",index);
    let products = this.state.products;
    ++products[index].num;
    this.setState({
      products:products,
    })
  };
  render() {
    return (
      <div className="cart">
        {/* 购物小车列表的开始 */}
        <div className="cart-list">
          {
            this.state.products.map((p,index) => {
              return <div className="cart-list-item" key={p.id}>
                <div className="list-item-left">
                  <i className="iconfont icon-xuanzhong-2"></i>
                </div>
                <div className="list-item-mid">
                  <img src={p.img_url} alt="" />
                </div>
                <div className="list-item-right">
                  <div className="item-right-top">
                    <div className="top-title">
                      {p.product_title}
                    </div>
                  </div>
                  <div className="item-right-bottom">
                    <div className="right-bottom-l">
                      <span className="price">{p.price}</span>
                      <span className="origin-price">{p.origin_price}</span>
                    </div>
                    <div className="right-bottom-r">
                      <span className="sub" onClick={this.handleSub.bind(this,index)}>-</span>
                      <span className="num">{p.num}</span>
                      <span className="add" onClick={this.handleAdd.bind(this,index)}>+</span>
                    </div>
                  </div>
                </div>
              </div>
            })
          }
        </div>

        {/* 购物小车列表的结束 */}
        {/* 底部功能区开始 */}
        <div className="cart-func">
          <div className="cart-func-left">
            <i className="iconfont icon-xuanzhongyuandian1"></i>
            <span className="check_title">已选({this.getSelectNum()})</span>
          </div>
          <div className="cart-func-right">
            <div className="func-right-l">
              <div className="right-l-top">
                合计:￥({this.getTotalPrice()})
            </div>
              <div className="right-l-bottom">已优惠￥()</div>
            </div>
            <div className="func-right-r">
              <span className="order_title">下单</span>
            </div>
          </div>
        </div>
        {/* 底部功能区结束 */}
      </div>
    );
  }
}

export default App;
